{% extends "layouts/base.html" %}
{% load i18n %}

{% block content %}
<div class="container mt-5">
  <div class="card shadow-lg p-4">
    <h2 class="text-center mb-4">{% trans "Relatório de Pedidos e Pagamentos" %}</h2>

    <table class="table table-striped table-hover">
      <thead class="table-dark">
        <tr>
          <th>{% trans "ID Pedido" %}</th>
          <th>{% trans "Usuário" %}</th>
          <th>{% trans "Valor Pago" %}</th>
          <th>{% trans "Moedas" %}</th>
          <th>{% trans "Status Pedido" %}</th>
          <th>{% trans "Status Pagamento" %}</th>
          <th>{% trans "Método" %}</th>
          <th>{% trans "Data" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for item in relatorio %}
        <tr>
          <td>{{ item.pedido_id }}</td>
          <td>{{ item.usuario }}</td>
          <td>R$ {{ item.valor_pago }}</td>
          <td>{{ item.moedas_geradas }}</td>
          <td>
            {% if item.status_pedido == 'CONFIRMADO' %}
              <span class="text-success">{% trans "CONFIRMADO" %}</span>
            {% elif item.status_pedido == 'PENDENTE' %}
              <span class="text-warning">{% trans "PENDENTE" %}</span>
            {% else %}
              <span class="text-danger">{{ item.status_pedido }}</span>
            {% endif %}
          </td>
          <td>
            {% if item.status_pagamento == 'confirmed' %}
              <span class="text-success">{% trans "confirmed" %}</span>
            {% elif item.status_pagamento == 'pending' %}
              <span class="text-warning">{% trans "pending" %}</span>
            {% else %}
              <span class="text-danger">{{ item.status_pagamento }}</span>
            {% endif %}
          </td>
          <td>{{ item.metodo }}</td>
          <td>{{ item.data|date:"d/m/Y H:i" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <div class="text-center mt-4">
      <a href="{% url 'accountancy:dashboard' %}" class="btn btn-secondary">{% trans "Voltar para o Dashboard" %}</a>
    </div>
  </div>
</div>
{% endblock %}
